<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <link rel="stylesheet" href="__CSS__/login.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="login-container">
      <div class="login-box">
        <div class="login-header">
          <h1>登录</h1>
          <p>请选择登录方式</p>
          <div class="login-type">
            <button class="type-btn active" data-type="password">
              密码登录
            </button>
            <button class="type-btn" data-type="sms">短信登录</button>
          </div>
        </div>
        <form id="loginForm" class="login-form">
          <input type="hidden" name="__token__" value="{:token()}" />

          <!-- 密码登录部分 -->
          <div class="form-group password-login">
            <input
              type="text"
              id="username"
              name="username"
              placeholder="用户名"
            />
          </div>
          <div class="form-group password-login">
            <input
              type="password"
              id="password"
              name="password"
              placeholder="密码"
            />
          </div>

          <!-- 短信登录部分 -->
          <div class="form-group sms-login" style="display: none">
            <input
              type="text"
              id="mobile"
              name="mobile"
              placeholder="手机号码"
            />
          </div>
          <div class="form-group sms-login" style="display: none">
            <div class="code-input">
              <input
                type="text"
                id="smsCode"
                name="smsCode"
                placeholder="短信验证码"
              />
              <button
                type="button"
                id="getCodeBtn"
                class="code-btn"
                style="width: 146px"
              >
                获取验证码
              </button>
            </div>
          </div>

          <button type="submit" class="login-btn">登录</button>
        </form>
      </div>
    </div>

    <script>
      // 切换登录方式
      $(".type-btn").click(function () {
        $(".type-btn").removeClass("active");
        $(this).addClass("active");
        const type = $(this).data("type");
        $(".password-login").toggle(type === "password");
        $(".sms-login").toggle(type === "sms");
      });

      // 获取验证码
      $("#getCodeBtn").click(function () {
        const mobile = $("#mobile").val();

        if (!/^1[3-9]\d{9}$/.test(mobile)) {
          alert("请输入有效的手机号码");
          return;
        }

        const $btn = $(this);
        $btn.prop("disabled", true).text("发送中...");

        $.ajax({
          url: "{:url('api/sendSmsCode')}",
          type: "POST",
          headers: {
            "X-CSRF-TOKEN": $('input[name="__token__"]').val(),
          },
          data: { mobile: mobile },
          success: function (response) {
            if (response.code == 0) {
              alert("验证码发送成功");
              startCountdown($btn);
            } else {
              alert(response.msg);
            }
            $('input[name="__token__"]').val(response.data.token);
          },
          error: function () {
            alert("发送失败，请稍后重试");
          },
          complete: function () {
            $btn.prop("disabled", false).text("获取验证码");
          },
        });
      });

      // 倒计时
      function startCountdown($btn) {
        let time = 60;
        const timer = setInterval(() => {
          if (time <= 0) {
            clearInterval(timer);
            $btn.prop("disabled", false).text("获取验证码");
          } else {
            $btn.text(`${time}秒后重试`);
            time--;
          }
        }, 1000);
      }

      // 提交表单
      $("#loginForm").submit(function (e) {
        e.preventDefault();

        const $submitBtn = $(this).find('button[type="submit"]');
        $submitBtn.prop("disabled", true).text("登录中...");

        const type = $(".type-btn.active").data("type");
        const data = {
          __token__: $('input[name="__token__"]').val(),
          ...(type === "password"
            ? {
                username: $("#username").val(),
                password: $("#password").val(),
              }
            : {
                mobile: $("#mobile").val(),
                smsCode: $("#smsCode").val(),
              }),
        };

        $.ajax({
          url: "{:url('api/login')}",
          type: "POST",
          headers: {
            "X-CSRF-TOKEN": $('input[name="__token__"]').val(),
          },
          data: data,
          success: function (response) {
            if (response.code == 0) {
              window.location.href = response.data.redirectUrl;
            } else {
              alert(response.msg);
            }
          },
          error: function () {
            alert("登录失败，请稍后重试");
          },
          complete: function () {
            $submitBtn.prop("disabled", false).text("登录");
            $('input[name="__token__"]').val(response.data.token);
          },
        });
      });
    </script>
  </body>
</html>
